<!DOCTYPE html>
<html lang="zh-CN">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>关于我 - 我的个人博客</title>
   <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
   <header class="header">
     <div class="container">
       <h1 class="logo">我的博客</h1>
       <nav class="main-nav">
         <ul>
           <li><a href="index.html">首页</a></li>
           <li><a href="about.html" class="active">关于我</a></li>
           <li><a href="#contact">联系我</a></li>
         </ul>
       </nav>
     </div>
   </header>

   <div class="container about-container">
     <section class="about-section">
       <h2>关于我</h2>

       <div class="about-content">
         <img
           src="./img/avatar-06.png"
           style="width: 100px"
           alt="我的照片"
           class="about-img"
         />

         <div class="about-text">
           <h3>张三</h3>
           <p class="title">前端开发工程师</p>
           <p>
 
           </p>
           <p>我的技术栈包括：</p>
           <ul class="skills">
             <li>HTML5 & CSS3</li>
             <li>JavaScript (ES6+)</li>
             <li>React.js</li>
             <li>Vue.js</li>
             <li>Node.js</li>
             <li>Git</li>
           </ul>
         </div>
       </div>
     </section>

     <section class="contact-section" id="contact">
       <h2>联系我</h2>

       <div class="contact-methods">
         <div class="contact-info">
           <h3>联系方式</h3>
           <ul>
             <li>
               <i class="fas fa-envelope"></i> Email: example@example.com
             </li>
             <li><i class="fas fa-phone"></i> 电话: 123-456-7890</li>
             <li><i class="fas fa-map-marker-alt"></i> 地址: 北京市海淀区</li>
           </ul>

           <div class="social-links">
             <a href="#"><i class="fab fa-github"></i></a>
             <a href="#"><i class="fab fa-twitter"></i></a>
             <a href="#"><i class="fab fa-linkedin"></i></a>
             <a href="#"><i class="fab fa-weibo"></i></a>
           </div>
         </div>

         <form class="contact-form">
           <h3>发送消息</h3>
           <div class="form-group">
             <input type="text" placeholder="你的姓名" required />
           </div>
           <div class="form-group">
             <input type="email" placeholder="你的邮箱" required />
           </div>
           <div class="form-group">
            <input type="text" placeholder="主题" />
           </div>
           <div class="form-group">
             <textarea placeholder="你的消息" rows="5" required></textarea>
           </div>
           <button type="submit" class="btn">发送消息</button>
         </form>
       </div>
     </section>
   </div>

   <footer class="footer">
     <div class="container">
       <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
       <div class="social-links">
         <a href="#"><i class="fab fa-github"></i></a>
         <a href="#"><i class="fab fa-twitter"></i></a>
         <a href="#"><i class="fab fa-linkedin"></i></a>
       </div>
     </div>
   </footer>

   <button id="back-to-top" title="回到顶部">↑</button>
   <script src="js/script.js"></script>
 </body>
</html>